<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p><b>首页</b> > <b>商品列表</b> > 商品添加</p>
        <div>commodity:{{commodity}}</div>
        <div>一级分类
            <select v-model="commodity.first_cateid">
                <option value="" disabled>请选择</option>
                <option v-for="item in first_cateids" :value="item.id">{{item.name}}</option>
            </select>
        </div>
        <div>二级分类
            <select v-model="commodity.second_cateid">
                <option value="" disabled>请选择</option>
                <option v-for="item in second_cateids" v-if="commodity.first_cateid == item.id">{{item.name}}</option>
            </select>
        </div>
        <div>商品名称<input type="text" v-model.lazy="commodity.goodsname"></div>
        <div>&emsp;&emsp;价格<input type="text" v-model.lazy="commodity.price"></div>
        <div>市场价格<input type="text" v-model.lazy="commodity.market_price"></div>
        <div>商品规格
            <select v-model="commodity.specsid">
                <option>请选择</option>
                <option v-for="item in specsids" :value="item.id">{{item.name}}</option>
            </select>
        </div>
        <div>规格属性
            <select multiple v-model="commodity.specsattr">
                <option>请选择</option>
                <option v-for="item in specsattrs">{{item.name}}</option>
            </select>
        </div>
        <div>是否新品
            <input type="radio" name="new" v-model="commodity.isnew" value="1">是
            <input type="radio" name="new" v-model="commodity.isnew" value="0">否
        </div>
        <div>是否热卖
            <input type="radio" name="hot" v-model="commodity.ishot" value="1">是
            <input type="radio" name="hot" v-model="commodity.ishot" value="0">否
        </div>
        <div>&emsp;&emsp;状态<input type="checkbox" v-model="commodity.status"></div>
    </div>
</body>

</html>
<script src="vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data:{
            first_cateids:[
                {id:0,name:"家用电器"},
                {id:1,name:"美妆护肤"},
                {id:2,name:"电子产品"}
            ],
            second_cateids:[
                {id:0,name:"冰箱"},
                {id:0,name:"电视"},
                {id:0,name:"空调"},
                {id:0,name:"电磁炉"},
                {id:1,name:"精华"},
                {id:1,name:"爽肤水"},
                {id:1,name:"美容仪"},
                {id:2,name:"手机"},
                {id:2,name:"平板"},
                {id:2,name:"笔记本电脑"}
            ],
            specsids:[
                {id:"0",name:"颜色"},
                {id:"1",name:"大小"},
                {id:"2",name:"尺寸"},
            ],
            specsattrs:[
                {name:"红色"},
                {name:"黄色"},
                {name:"绿色"}
            ],
            commodity:{
                first_cateid:"",
                second_cateid:"",
                goodsname:"",
                price:"",
                market_price:"",
                specsid:"",
                specsattr:[],
                isnew:"",
                ishot:"",
                status:true
            }
        },
        methods: { }
    })
</script>